<template>
  <div class="block">
    <div class="head">
      <h2>门店销售情况</h2>
      <div class="tips">统计数据不包含当日</div>
      <div class="link"><i class="el-icon-s-ticket"></i>去促销</div>
    </div>
    <div class="formBlock">
      <el-select
        v-model="selectVal1"
        placeholder="请选择门店"
        @change="selectChange"
        @focus="getStoreList"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="selectVal2"
        placeholder="请选择"
        @change="selectChange"
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- <hitimescheme ref="dateRange" :value="dateRange" @change="dateRangeChange"></hitimescheme> -->
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="dateRangeChange"
      >
      </el-date-picker>
    </div>
    <div ref="charts" :style="chartsStyle"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import baseView from "@/views/base";
import { dataHelper, utils } from "hi-ui";
import dataViewCfg from "./dataset.js";

export default {
  name: "chartView",
  extends: baseView,
  components: {},
  data() {
    return {
      dataset: null,
      dataViewCfg: dataViewCfg,
      chartData: null,
      selectVal1: "",
      selectVal2: "FDAY",
      dateRange: "",
      options1: [],
      options2: [
        {
          value: "FDAY",
          label: "天",
        },
        {
          value: "FWEEK",
          label: "周",
        },
        {
          value: "FMONTH",
          label: "月",
        },
        {
          value: "FYEAR",
          label: "年",
        },
      ],
    };
  },
  computed: {
    chartsStyle() {
      return {
        height: "calc(100% - 90px)",
      };
    },
  },
  watch: {},
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.charts);

      // 指定图表的配置项和数据
      var option = {
        color: "#4EA0E8",
        tooltip: {},
        legend: {
          data: ["销售额"],
          bottom: 0,
        },
        xAxis: {
          data: this.chartData.map((item) => {
            return item.date;
          }),
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "销售额",
            type: "line",
            data: this.chartData.map((item) => {
              return item.money.toFixed(2);
            }),
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getStoreList(res) {
      let param = new dataHelper.queryHelper.Param();
      let where = new dataHelper.queryHelper.Where();
      where.setPage(1, -1);
      param.where = where;
      this.queryEntity(
        where,
        "database/shop/dataset/ShopEntity.xml",
        this.$route.path
      ).then((res) => {
        console.log(res.dataPack.rows);
        this.options1 = res.dataPack.rows.map((item) => {
          return {
            value: item.FNUMBER,
            label: item.FDESC,
          };
        });
      });
    },
    selectChange(res) {
      this.dataset.load();
    },
    dateRangeChange(res) {
      if (res) {
        this.dateRange = [
          utils.date.format(res[0], "yyyy-MM-dd"),
          utils.date.format(res[1], "yyyy-MM-dd"),
        ];
      } else {
        this.dateRange = [];
      }
      this.dataset.load();
    },
  },
  mounted() {
    //创建主数据集
    this.dataset = this.$dsContainer.createDataSet(this.dataViewCfg);
    this.dataset.on("beginload", (param) => {
      if (!param) {
        let param = new dataHelper.queryHelper.Param();
        param.where = new dataHelper.queryHelper.Where();
      }
      param.where.setPage(1, -1);
      let paramItem = param.where.items;
      if (this.dateRange && this.dateRange.length > 0) {
        param.where.between("FDAY", this.dateRange.join("到"), "dbDate");
      }
      if (this.selectVal1) {
        param.where.eq("FSHOPDESCID", this.selectVal1);
      }
      if (this.selectVal2) {
        param.setGroup(this.selectVal2);
      }
      if (!param.orders) {
        param.orders = new dataHelper.queryHelper.Orders();
      }
      //param.orders.addAsc(this.selectVal1);
    });
    this.dataset.on("afterload", (param) => {
      let __data = this.dataset.data.map((item) => {
        return {
          money: item.FRECEIVABLEMONEY,
          date:
            this.selectVal2 == "FDAY"
              ? utils.date.format(item[this.selectVal2], "yyyy-MM-dd")
              : item[this.selectVal2],
        };
      });
      this.chartData = __data;
      this.init();
    });
    this.dataset.load();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  height: 100%;
  $titleH: 40px;
  padding: 0 20px;
  .head {
    height: $titleH;
    display: flex;
    align-items: center;
    h2 {
      line-height: $titleH;
      font-size: 15px;
      font-weight: bold;
      margin: 0 15px 0 0;
    }
    .tips {
      border: 1px solid #c9deb7;
      border-radius: 5px;
      background-color: #f4ffee;
      font-size: 12px;
      color: #666;
      height: 24px;
      line-height: 22px;
      width: 130px;
      text-align: center;
    }
    .link {
      margin-left: auto;
      width: 100px;
      text-align: right;
      color: #0090ff;
      cursor: pointer;
    }
  }
  .formBlock {
    padding: 20px 10px 0;
    margin-bottom: -20px;
    z-index: 99;
    position: relative;
    .el-select {
      margin-right: 10px;
      width: 130px;
    }
  }
}
</style>
